<template>
    <div class="bigBox">
        <div class="contentBox">
            <div class="allItemBox">
                <div class="itemBox" v-for="(book, index) in list" :key="index">
                    <div class="leftBox" :class="{ imgNameCss: !book.imgUrl }">
                        <el-image v-if="book.imgUrl" style="width: 150px; height: 150px" :src="book.imgUrl" />
                        <span v-else>{{ book.imgName }}</span>
                    </div>
                    <div class="rightBox">
                        <h3 class="title" @click="goDetail(book.id)"><span>{{ book.name }}</span></h3>
                        <p><span>click</span> <span v-show="book.hot" class="text-danger"><el-icon>
                                    <StarFilled />
                                </el-icon></span></p>
                        <div class="info">
                            <span class="text-ellipsis">
                                {{ book.info }}
                            </span>
                        </div>
                        <p class="d-flex justify-content-between"> <span>{{ book.categoryName }}</span> <span>{{
                    book.createTime }}</span></p>
                    </div>
                </div>
                <nav class="page" aria-label="Page navigation example" v-show="totalPage > 1">
                    <ul class="pagination justify-content-center">
                        <li class="page-item disabled">
                            <a class="page-link"><el-icon>
                                    <DArrowLeft />
                                </el-icon></a>
                        </li>
                        <li class="page-item" :class="{ active: page == pageNo }" v-for="pageNo in pageNoList"
                            @click="changePage(pageNo)"><a class="page-link" href="#">{{ pageNo }}</a></li>
                        <li class="page-item">
                            <a class="page-link" href="#"><el-icon>
                                    <DArrowRight />
                                </el-icon></a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="selectBox">
            <div class="searchBox">
                <div class="searchItem">
                    <el-input class="seachName" v-model="search.name" @keydown.enter="load">
                        <template #prefix>
                            <el-icon class="el-input__icon">
                                <search />
                            </el-icon>
                        </template>
                    </el-input>
                </div>
            </div>
            <div class="categoryBox">
                <categorybox @searchCategory="searchCategory" :list="categoryList"></categorybox>
            </div>
            <div class="hotBox">
                <hotBox :randHotBookList="randHotBookList"></hotBox>
            </div>
            <div class="tagBox">
                <tagBox></tagBox>
            </div>
            <div class="dateBox">
                <dateBox @searchDate="searchDate" :dateMapList="dateMapList"></dateBox>
            </div>
            <div class="statementBox"></div>
        </div>
    </div>
</template>

<script>
import { ref, watch } from "vue"
import { Calendar, Search } from '@element-plus/icons-vue'
import categorybox from "@/components/home/categorybox/index.vue"
import hotBox from "@/components/home/hot/index.vue"
import tagBox from "@/components/home/tag/index.vue"
import dateBox from "@/components/home/date/index.vue"
export default {
    components: {
        categorybox,
        hotBox,
        tagBox,
        dateBox
    },
    data() {
        return {
            list: 10,
            page: 1,
            size: 10,
            total: 0,
            totalPage: 0,
            pageNoList: [],
            search: { name: "", hotSort: false },
            categoryList: [{ name: 'JAVA', count: 10 }, { name: 'HTML', count: 0 }],
            dateMapList: {},
            randHotBookList: []
        }
    },
    created() {
        this.load()
        this.randHotBook()
    },
    methods: {
        changePage(pageNo) {
            this.page = pageNo
            this.load()
        },
        searchCategory(name) {
            console.log(name);
            this.search.categoryName = name
            this.page = 1
            this.load()
        },
        searchDate(year, month) {
            this.search.year = year
            this.search.month = month
            this.page = 1
            this.load()
        },
        randHotBook() {
            this.$axios.get(`/home/blog/randHotBook`).then(({ data }) => {
                if (data.code == 0) {
                    this.randHotBookList = data.data
                } else {
                    this.$message.error(data.msg)
                }
            }).catch(() => {
                this.$message.error("请求错误，请联系管理员")
            })
        },
        load() {
            this.$axios.post(`/home/blog/page?page=${this.page}&size=${this.size}`, this.search).then(({ data }) => {
                if (data.code == 0) {
                    this.list = data.T.pages.records
                    this.total = data.T.pages.totalRow
                    this.totalPage = data.T.pages.totalPage
                    this.dateMapList = data.T.dateMap
                    this.categoryList = data.T.categoryNames
                    this.computed(data.T.pages.totalPage, this.page)
                } else {
                    this.$message.error(data.msg)
                }
            }).catch(() => {
                this.$message.error("请求错误，请联系管理员")
            })
        },
        goDetail(id) {
            this.$router.push({ path: '/home/homeBookDetail', query: { id: id } })
        },
        computed(pages = 10, current = 1) {
            let restrictNum = 5; //显示页码数
            let start = 1;
            let end = restrictNum + 1;//
            let i = Math.ceil(restrictNum / 2);//中间数
            let min = Math.min(pages, restrictNum);//最小总数
            if (current <= i || pages <= restrictNum) { //当前页<=中间数或者总页数<=页码数
                end = min;
            } else if (current == pages) { // 最后一页
                // 当前页 = 总页数
                // 总页数是否大于限定页数
                if (pages > restrictNum) { // 10 > 5 ,10
                    start = pages - restrictNum + 1;// 10-5+1 = 6
                    end = pages; // 10
                } else { // 4 < 5 ,5
                    start = 1;
                    end = pages;
                }
            } else { // 4 , 10, 5
                start = current - i + 1;
                end = start + restrictNum - 1;
                if (end > pages) {
                    start = pages - restrictNum + 1;
                    end = start + restrictNum - 1;
                }
            }
            //LongStream.range(start, end + 1).forEach(x => longs.add(x));
            // Long[] array = longs.toArray(new Long[min.intValue()]);
            this.pageNoList = Array.from({ length: end + 1 }, (x, y) => y).filter(x => x >= start)
            console.log(this.pageNoList);
        }
    },
    watch: {
    }
}
</script>

<style scoped>
.imgNameCss {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: antiquewhite;
    color: rgb(103, 117, 117);
}

.title {}

/* @import url(); 引入css类 */
p {
    margin: 0px;
}

.bigBox {
    display: flex;
}

.contentBox {
    width: 70%;
}

.selectBox {
    width: calc(100% - 75%);
}

.allItemBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 70px;
}

.itemBox {
    display: flex;
    flex-direction: row;
    width: 80%;
    height: 150px;
    margin-bottom: 20px;
    box-sizing: border-box;
    position: relative;
}

.leftBox {
    width: 180px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: auto 0px;
}

.rightBox {
    padding-left: 1em;
    width: 100%;
}

.info {
    text-indent: 2em;
    height: 50px;
    width: 100%;
    word-break: break-all;
}

.selectBox {
    padding-top: 70px;
}

.selectBox>div {
    margin-top: 20px;
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.rightBox>.title:hover span {
    display: inline-block;
    animation: myTitltemove 1s infinite;
    animation-direction:alternate;
}

.rightBox>.title:hover>span {
    border-bottom: 1px solid rgb(179, 177, 177);
    cursor: pointer;
}

@keyframes myTitltemove {
    from {
        transform: rotate(0deg);
    }

    50% {
        /* transform: rotate(20deg);  */
        transform: scale(1.2);
        transform: rotate(2deg);
    }

    75% {
        transform: rotate(-2deg);
    }

    to {
        transform: rotate(0deg);
        transform: scale(1);
    }
}


@media (max-width: 1030px) {
    .selectBox {
        display: none;
    }

    .contentBox {
        width: 100%;
    }
}
</style>